<template>
  <view class="hot-container">
    <image class="logo" src="@/static/images/logo.png" mode="aspectFit" />
    <!-- 可直接使用，无需注册 -->
    <view class="search-box" @click="onToSearch">
      <my-search placeholderText="uni-app 自定义组件"></my-search>
    </view>
    <!-- uni-app中进行父向子传递数据，遵循vue v-bind 命令
    :tabData="tabData" === 小程序中的bind:"{{tabData}}" -->
    <my-tabs
      class="tab-sticky"
      :tabData="tabData"
      :defaultIndex="currentIndex"
      @tabClick="onTabClick"
    ></my-tabs>

    <swiper
      class="swiper"
      :current="currentIndex"
      :style="{ height: currentSwiperHeight + 'px' }"
      @animationfinish="onSwiperEnd"
      @change="onSwiperChange"
    >
      <swiper-item
        class="swiper-item"
        v-for="(tabItem, tabIndex) in tabData"
        :key="tabIndex"
      >
        <view>
          <uni-load-more status="loading" v-if="isLoading" />
          <block v-else>
            <hot-list-item
              :class="'hot-list-item-' + tabIndex"
              v-for="(item, index) in listData[currentIndex]"
              :key="index"
              :data="item"
              :ranking="index + 1"
              @click="onItemClick(item)"
            >
            </hot-list-item>
          </block>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getHotTabs, getHotListFromTabType } from 'api/hot';

export default {
  data() {
    return {
      tabData: [],
      currentIndex: 0,
      isLoading: true,
      listData: {},
      currentSwiperHeight: 0,
      swiperHeightData: {},
      currentPageScrollTop: 0,
    };
  },
  created() {
    this.loadHotTabs();
  },
  onPageScroll(res) {
    // console.log(res);
    this.currentPageScrollTop = res.scrollTop;
  },
  methods: {
    /**
     * 跳转search-blog
     */
    onToSearch() {
      uni.navigateTo({ url: '/subpkg/pages/search-blog/search-blog' });
    },
    /**
     * 获取热搜文章类型
     */
    async loadHotTabs() {
      const { data: res } = await getHotTabs();
      this.tabData = res.list;

      this.loadHotListFromTab();
    },
    onTabClick(index) {
      this.currentIndex = index;
      // this.loadHotListFromTab();
    },

    onSwiperChange(e) {
      if (this.currentPageScrollTop > 130) {
        uni.pageScrollTo({ scrollTop: 130 });
      }
      this.currentIndex = e.detail.current;
    },

    onSwiperEnd() {
      if (!this.listData[this.currentIndex]) {
        this.loadHotListFromTab();
        return;
      }
      this.currentSwiperHeight = this.swiperHeightData[this.currentIndex];
    },
    async loadHotListFromTab() {
      if (!this.listData[this.currentIndex]) {
        this.isLoading = true;
        const id = this.tabData[this.currentIndex].id;
        const { data: res } = await getHotListFromTabType(id);
        this.listData[this.currentIndex] = res.list;
        this.isLoading = false;

        setTimeout(async () => {
          this.currentSwiperHeight = await this.getCurrentSwiperHeight();
          this.swiperHeightData[this.currentIndex] = this.currentSwiperHeight;
        }, 0);
      }
    },
    getCurrentSwiperHeight() {
      return new Promise((resolve, reject) => {
        let sum = 0;
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll(`.hot-list-item-${this.currentIndex}`)
          .boundingClientRect((res) => {
            // console.log(res);
            res.forEach((item) => {
              sum += item.height;
            });
            resolve(sum);
          })
          .exec();
      });
    },
    /**
     * 进入文章详情
     */
    onItemClick(item) {
      uni.navigateTo({
        url: '/subpkg/pages/blog-detail/blog-detail',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hot-container {
  background-color: $uni-bg-color;
  .logo {
    width: 100%;
    height: 80px;
  }
  .search-box {
    padding: 0 16px;
    margin-bottom: $uni-spacing-col-base;
  }
  .tab-sticky {
    position: sticky;
    z-index: 99;
    top: 0;
  }
}
</style>
